<template>
  <div class="container">
    <Category title="游戏">
      <template scope="cate">
        <!-- 作用域插槽：template标签的'scope'属性定义的值，可以用来获取所使用组件内定义的插槽传递的数据 -->
        <!-- {{cate.games}} -->
        <!-- {{cate.msg}} -->
        <ul>
          <li v-for="(game,index) in cate.games" :key="index">
              {{game}}
          </li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <template scope="cate">
        <ol>
          <li v-for="(game,index) in cate.games" :key="index">
              {{game}}
          </li>
        </ol>
      </template>
    </Category>

    <Category title="游戏">
      <template scope="cate">
        <h4 v-for="(game,index) in cate.games" :key="index">{{game}}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
  //
  import Category from './components/Category'

  export default {
      name:'App',
      components:{Category},
  }
</script>

<style scoped>
  .container{
    display: flex;
    justify-content: space-around;
  }
</style>